<template>
  <view class="ve-radio">
    <view v-for="(item, index) in list" :key="index" class="radio-item" @tap="change(item)">
      <template v-if="disabled">
        <view v-if="modelValue === item?.value" class="blue disable-circle mr16">
          <view c-else class="inner-circle"></view>
        </view>
        <view v-else class="disable-nocircle mr16"></view>
      </template>
      <template v-else>
        <view class="blue check-circle mr16" v-if="modelValue === item?.value">
          <view class="inner-circle"></view>
        </view>
        <view class="no-circle mr16" v-else> </view>
      </template>
      <view class="radio-label">{{ item.label }}</view>
    </view>
  </view>
</template>
<script>
  export default {
    name: 'radio',
    data() {
      return {}
    },
    props: {
      modelValue: {
        type: [Number, Boolean, String],
      },
      list: {
        type: Array,
        default: () => [],
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      change(item) {
        let that = this
        let { disabled } = that
        if (disabled) {
          return false
        }
        if (item.value == this.modelValue) return
        this.$emit('update:modelValue', item.value)
        this.$emit('confirm', item)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .mr16 {
    margin-right: 6rpx;
  }
  .ve-radio {
    margin-bottom: -16rpx;
    justify-content: flex-end;
    display: flex;
    flex-wrap: wrap;

    .radio-item {
      display: flex;
      align-content: center;
    }
    .radio-item + .radio-item {
      margin-left: 48rpx;
    }

    .radio-label {
      display: flex;
      font-size: 28rpx;
      font-weight: 400;
      color: #1d2129;
      line-height: 28rpx;
      word-break: keep-all;
      margin-bottom: 16rpx;
      margin-left: 16rpx;
    }
  }
  .blue {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    background: #3072f6;
    display: flex; /* 将容器设置为弹性盒子 */
    justify-content: center; /* 将弹性盒子内的内容水平居中 */
    align-items: center;
  }
  .check-circle {
    background: #3072f6;
  }
  .inner-circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
  }
  .no-circle {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    background: #fff;
    border: 4rpx solid #e5e6eb;
  }
  .disable-nocircle {
    width: 28rpx;
    height: 28rpx;
    background: #f2f3f5;
    border-radius: 50%;
    opacity: 1;
    border: 4rpx solid #e5e6eb;
  }
  .disable-circle {
    background: rgba(48, 114, 246, 0.3);
  }
</style>
